import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import Exchange from './Exchange'
import EditForex from './EditForex'
import ClaimList from './ClaimList'

import OperatorConstant from "../../utils/OperatorConstant";

const R = require('ramda');
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';


export default Form.create({wrappedComponentRef: true})(class ForexDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: "",
            loading: false
        }
    }

    handleCancel = () => {
        this.props.form.resetFields();
        if(this.editForex)this.editForex.handleCancel();
        if(this.exchange)this.exchange.handleCancel();
        this.setState({open:false, loading: false});
        this.props.dispatch({
            type: 'foreignExchangeManage/setDataSource',
            payload: {
                data: "",
            }
        });
    }

    handleOpen = (type) => {
        this.state.type = type;
        this.setState({open: true})
    }

    handleConfirm = () => {
        if(this.state.type == OperatorConstant.view){
            return;
        }
        this.props.form.validateFields((errors, values) => {
            if (errors) return;

            if (this.state.type == OperatorConstant.add) {
                this.editForex.handleConfirm();

            } else if (this.state.type == OperatorConstant.exchange) {
                this.exchange.handleConfirm({resetLoading : (loading) => {
                    this.setState({ loading});
                }});

            }else if(this.state.type == OperatorConstant.approval){
                let dataSource = this.props.dataSource ? this.props.dataSource : {};
                if(!dataSource.exchangeurl){
                    message.error("结汇水单还没有补充完毕！");
                    return;
                }
                this.setState({ loading: true });

                this.props.dispatch({
                    type: 'foreignExchangeManage/approvalForex',
                    payload: {
                        forexId: this.props.dataSource.id,
                        entityid: this.props.dataSource.id,
                        approvalresult: values.approvalresult,
                        approvalmemo: values.approvalmemo,
                        onSuccess:()=>{
                            this.props.handleSearch();
                            this.handleCancel();
                        },
                        onFail: () => this.setState({ loading: false })
                    }
                });
            }

        })
    }

    handleUpdateAttach = (id) => {
        let exchangeurl = this.exchange.getAttach();
        if(!exchangeurl) {
            message.info("请先上传外汇水单！");
            return;
        }
        this.props.dispatch({
            type: 'foreignExchangeManage/updateForex',
            payload: {
                id,
                exchangeurl,
                onSuccess:()=>{
                    this.handleCancel();
                    this.props.handleSearch();
                }
            }
        })
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let footer = [];

        footer.push(<Button key="cancel" size="large"  onClick={this.handleCancel.bind(this)}>取消</Button>);

        if (this.state.type != OperatorConstant.view) {
            footer.push(<Button key="apply" size="large" loading={this.state.loading} onClick={this.handleConfirm.bind(this)}>确认</Button>);

        }
        let dataSource = this.props.dataSource ? this.props.dataSource : {};
        if(dataSource.source === '1' && this.props.dataSource.status === '3' && !this.props.dataSource.exchangeurl && this.state.type === OperatorConstant.view)
            footer.push(<Popconfirm onConfirm={this.handleUpdateAttach.bind(this, dataSource.id)} okText="是" cancelText="否"
                            placement="leftTop" title={'保存之后不能再次修改，请确保上传正确的水单！'}>
                            <Button key="apply" size="large" >保存水单</Button>
                        </Popconfirm>)

        return (
            <Modal maskClosable={false} visible={this.state.open} title={"外汇"} width={900} wrapClassName="vertical-center-modal"
                   onCancel={this.handleCancel.bind(this)} footer ={footer}>

                <EditForex wrappedComponentRef={(inst) => this.editForex = inst} dispatch={this.props.dispatch}
                           dataSource={this.props.dataSource} type={this.state.type} handleCancel={this.handleCancel}
                           accountList = {this.props.accountList}
                           handleSearch={this.props.handleSearch}
                           paymen={R.isNil(this.props.paymen)?null:this.props.paymen.list}
                />

                {OperatorConstant.add == this.state.type || OperatorConstant.approval == this.state.type ? ""
                    :
                    <Exchange wrappedComponentRef={(inst) => this.exchange = inst} dispatch={this.props.dispatch}
                              dataSource={this.props.dataSource} type={this.state.type} handleCancel={this.handleCancel}
                              handleSearch={this.props.handleSearch} />
                }

                {OperatorConstant.approval == this.state.type ?
                    <div>
                        {/*<ClaimList wrappedComponentRef={(inst) => this.claimList = inst} dispatch={this.props.dispatch}*/}
                                   {/*claim = {this.props.claim}*/}
                                   {/*dataSource={this.props.dataSource} type={this.state.type} handleCancel={this.handleCancel}/>*/}

                        <Tabs tabPosition={'top'}>
                            <TabPane tab="审核" key="1">
                                <Form>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="请选择审核状态"
                                                hasFeedback
                                            >
                                                {getFieldDecorator('approvalresult', {
                                                    rules: [{
                                                        required: true, message: '请选择审核状态！',
                                                    }],
                                                    initialValue: ''
                                                })(
                                                    <Select>
                                                        <Option value=""></Option>
                                                        <Option value="4">审核通过</Option>
                                                        <Option value="5">审核失败</Option>
                                                    </Select>
                                                )}
                                            </FormItem>
                                        </Col>

                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="备注"
                                                hasFeedback
                                            >
                                                {getFieldDecorator('approvalmemo', {
                                                    rules: [{
                                                        required: false, message: '请输入备注！',
                                                    }],
                                                    initialValue: ''
                                                })(
                                                    <Input/>
                                                )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </Form>
                            </TabPane>
                        </Tabs>
                    </div>
                    : ""}

            </Modal>
        );
    }
})


